<script lang="ts" setup>
import { defineEmits } from 'vue';
import { NButton, NDivider, NSpace, NTooltip } from 'naive-ui';

const emit = defineEmits(['undo', 'redo', 'save', 'export']);
</script>

<template>
  <div class="toolbar">
    <NSpace justify="end">
      <NTooltip trigger="hover">
        <template #trigger>
          <NButton quaternary circle @click="emit('undo')">撤销</NButton>
        </template>
      </NTooltip>

      <NTooltip trigger="hover">
        <template #trigger>
          <NButton quaternary circle @click="emit('redo')">重做</NButton>
        </template>
      </NTooltip>

      <NDivider vertical />

      <NTooltip trigger="hover">
        <template #trigger>
          <NButton quaternary circle @click="emit('save')">保存</NButton>
        </template>
      </NTooltip>

      <NTooltip trigger="hover">
        <template #trigger>
          <NButton quaternary circle @click="emit('export')">导出</NButton>
        </template>
      </NTooltip>
    </NSpace>
  </div>
</template>

<style scoped>
.toolbar {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
</style>
